<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">	
	<link rel="stylesheet" href="css/swiper.min.css">
	<style>
		body{
            margin:0;
            padding:0;
        }
        .swiper-container{
        	width: 100%;
        	height: 300px;
        	margin: 20px auto;
        }
        .swiper-slide{
			text-align: center;
			background-color: #ccc;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.append-buttons{
			text-align: center;
			margin-top: 20px;
		}
		.append-buttons a{
			display: inline-block;
			border: 1px solid blue;
			color: blue;
			font-size: 13px;
			text-decoration: none;
			border-radius: 4px;
			margin: 0 10px;
			padding: 4px 10px;
		}
	</style>
</head>
<body>
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide">第1页</div>
			<div class="swiper-slide">第2页</div>
			<div class="swiper-slide">第3页</div>
			<div class="swiper-slide">第4页</div>
			<div class="swiper-slide">第5页</div>
		</div>
		<div class="swiper-pagination"></div>
		<div class="swiper-button-next"></div>
		<div class="swiper-button-prev"></div>
	</div>
	<p class="append-buttons">
        <a href="#" class="prepend">向前添加滑块</a>
        <a href="#" class="prepend2">向前添加2个滑块</a>
        <a href="#" class="append">向后添加滑块</a>
        <a href="#" class="append2">向后添加2个滑块</a>
    </p>

	<script src="js/swiper.min.js"></script>
	<script>
		var swiper=new Swiper(".swiper-container",{
			pagination:".swiper-pagination", 
			paginationClickable:true,
			spaceBetween:30, 
			nextButton:".swiper-button-next",
			prevButton:".swiper-button-prev",
			grabCursor:true,
			slidesPerView:3,
			centeredSlides:true,
		});

		/*
			HTML5中新增了document.querySelector()以及document.querySelectorAll()两个方法，用来更方便地从DOM选取元素，功能上类似于jQuery的选择器
		*/
	   // swiper.prependSlide("<div class='swiper-slide'>字符串"+(变量)++"字符串</div>)
	   // 给轮播图添加页面并附带文字
	   // 为轮播图首尾编号
		var appendNumber=6;
		var prependNumber=0;
		document.querySelector(".append").addEventListener("click",function(e){
			e.preventDefault(); //阻止事件关联的默认行为，避免超链接跳转
			swiper.appendSlide("<div class='swiper-slide'>第"+(appendNumber++) +"页</div>");
		});
		document.querySelector(".append2").addEventListener("click",function(e){
			e.preventDefault(); //阻止事件关联的默认行为
			swiper.appendSlide([
				"<div class='swiper-slide'>第"+(appendNumber++) +"页</div>",
				"<div class='swiper-slide'>第"+(appendNumber++) +"页</div>"
			]);
		});
		document.querySelector(".prepend").addEventListener("click",function(e){
			e.preventDefault(); //阻止事件关联的默认行为
			swiper.prependSlide("<div class='swiper-slide'>第"+(prependNumber++) +"页</div>");
		});
		document.querySelector(".prepend2").addEventListener("click",function(e){
			e.preventDefault(); //阻止事件关联的默认行为
			swiper.prependSlide([
				"<div class='swiper-slide'>第"+(prependNumber++) +"页</div>",
				"<div class='swiper-slide'>第"+(prependNumber++) +"页</div>"
			]);
		});



	</script>	
</body>
</html>